<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login</title>

      {% load static %}

    <!-- Bootstrap core CSS-->
    <link href="{% static '/info/bootstrap/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom fonts for this template-->
    <link href="{% static '/info/bootstrap/vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template-->
    <link href="{% static '/info/bootstrap/css/sb-admin.css' %}" rel="stylesheet">

  </head>

  <body class="bg-dark" style="background-image: url(https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGlnaCUyMHJlc29sdXRpb24lMjAlMjBhYnN0cmFjdCUyMGltYWdlc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=5000&q=60);max-height:50px; width: auto; background-repeat: no-repeat; background-size: cover;">

    <div class="container" >
      <div class="card card-login mx-auto mt-5">
        <div class="card-header text-center" >Login</div>
        <div class="card-body">
            <form method="post">
              {% csrf_token %}
              {{ form.as_p }}
              <div class="input-group mb-3">
                <div class="g-recaptcha" data-sitekey="6LcWB6saAAAAACUPqykWy4fOmExoWw31W_l_w6Ex"></div>
              <button  class="btn btn-success col-md-12 text-center" type="submit">Login</button> <br>
              <p><a href="{% url "password_reset" %}">Admin: Forgotten your password?</a></p>
              <p><a href="{% url "forgot_password" %}">Student or Teacher: Forgotten your password?</a></p>
            </form>

        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="{% static '/info/bootstrap/vendor/jquery/jquery.min.js' %}"></script>
    <script src="{% static '/info/bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

    <!-- Core plugin JavaScript-->
    <script src="{% static '/info/bootstrap/vendor/jquery-easing/jquery.easing.min.js' %}"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

  </body>

</html>
